<template>
  <h2 ref="title">vue3的生命周期</h2>
  <p>{{ num }}</p>
  <test v-if="isShow"></test>
  <button @click="isShow = !isShow">修改</button>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from "vue";
import test from '@/components/test.vue'
const title = ref(null)
const num = ref(1)
const isShow = ref(true)
//挂载前
onBeforeMount(() => {
  console.log('挂载前')
})

//挂载之后
onMounted(() => {
  console.log('挂载之后', title.value)
})

//更新前
onBeforeUpdate(() => {
  console.log('更新之前', num.value)
})

onUpdated(() => {
  console.log('更新之后', num.value)
})



</script>

<style scoped lang="scss"></style>
